<template>
  <div>
    <div class="title">广州塑力人力资源有限公司</div>
    <div class="main">
      <div class="main-l">
        <div id="demo">
          <inlineCalendar @change="onChange" class="data-l" />
        </div>
        <div>{{date}}<button @click="onQuery(date)">确认</button></div>
        <div class="main-l-cell" v-for="(item,index) in list" :key="index">
          <div class="item-cell">{{item.name}}</div>
          <div class="item-cell">{{item.sex}}</div>
          <div class="item-cell">{{item.age}}</div>
          <div><button @click="onChoice(item)">选择</button></div>
        </div>
      </div>
      <div v-if="userInfo">
        <div id="printID" class="main-r">
          <div class="print-t">求职登记表</div>
          <div class="form-b">
            <div class="form-x">
              <div class="bold-t">编号</div>
              <div class="fill-in"></div>
              <div class="bold-t">填表日期</div>
              <div class="fill-in">{{data1}}</div>
            </div>
            <div class="form-x">
              <div class="bold-t">姓名</div>
              <div class="fill-in"><span v-if="name!='null'">{{name}}</span></div>
              <div class="bold-t">联系电话</div>
              <div class="fill-in"><span v-if="tel!='null'">{{tel}}</span></div>
            </div>
            <div class="form-x">
              <div class="bold-t">身份证</div>
              <div class="fill-in"><span v-if="card!='null'">{{card}}</span></div>
            </div>
            <div class="form-x">
              <div class="bold-t">性别</div>
              <div class="fill-in"><span v-if="sex!='null'">{{sex}}</span></div>
              <div class="bold-t">出生年月日</div>
              <div class="fill-in"></div>
              <div class="bold-t">籍贯</div>
              <div class="fill-in"><span v-if="native!='null'">{{native}}</span></div>
              <div class="bold-t">民族</div>
              <div class="fill-in"><span v-if="nation!='null'">{{nation}}</span></div>
            </div>
            <div class="form-x">
              <div class="bold-t">身高cm</div>
              <div class="fill-in"><span v-if="height!='null'">{{height}}</span></div>
              <div class="bold-t">体重kg</div>
              <div class="fill-in"><span v-if="weight!='null'">{{weight}}</span></div>
              <div class="bold-t">视力情况</div>
              <div class="fill-in"><span v-if="strength!='null'">{{strength}}</span></div>
              <div class="bold-t">鞋码</div>
              <div class="fill-in"><span v-if="shoe!='null'">{{shoe}}</span></div>
            </div>
            <div class="form-x">
              <div class="bold-t">婚姻情况</div>
              <div class="fill-in"><span v-if="marriage!='null'">{{marriage}}</span></div>
            </div>
            <div class="form-x">
              <div class="bold-t">毕业学校</div>
              <div class="fill-in"><span v-if="graduate!='null'">{{graduate}}</span></div>
              <div class="bold-t">最高学历</div>
              <div class="fill-in"><span v-if="education!='null'">{{education}}</span></div>
              <div class="bold-t">专业</div>
              <div class="fill-in"><span v-if="major!='null'">{{major}}</span></div>
              <div class="bold-t">毕业时间</div>
              <div class="form-x"><span v-if="gradTime!='null'">{{gradTime}}</span></div>
            </div>
            <div class="form-x">
              <div class="bold-t">语言能力</div>
              <div class="fill-in"><span v-if="language!='null'">{{language}}</span></div>
              <div class="bold-t">外语水平/级别</div>
              <div class="fill-in"><span v-if="foreign!='null'">{{foreign}}</span></div>
              <div class="bold-t">微信</div>
              <div class="fill-in"><span v-if="weixin!='null'">{{weixin}}</span></div>
              <div class="bold-t">邮箱</div>
              <div class="fill-in"><span v-if="mailbox!='null'">{{mailbox}}</span></div>
            </div>
            <div class="form-x">
              <div class="bold-t">现住地址</div>
              <div class="fill-in"><span v-if="addressnow!='null'">{{addressnow}}</span></div>
            </div>
            <div class="form-x">
              <div class="bold-t">户籍地址</div>
              <div class="fill-in"><span v-if="addressregister!='null'">{{addressregister}}</span></div>
            </div>
            <div class="form-x">
              <div class="bold-t">紧急联系人</div>
              <div class="fill-in"><span v-if="emergency!='null'">{{emergency}}</span></div>
              <div class="bold-t">本人关系</div>
              <div class="fill-in"><span v-if="relationship!='null'">{{relationship}}</span></div>
              <div class="bold-t">联系方式</div>
              <div class="fill-in"><span v-if="contact!='null'">{{contact}}</span></div>
            </div>
            <div class="form-x">
              <div class="bold-t">有无过往病史</div>
              <div class="fill-in"><span v-if="illness!='null'">{{illness}}</span></div>
              <div class="bold-t">有无过往手术史</div>
              <div class="fill-in"><span v-if="operation!='null'">{{operation}}</span></div>
              <div class="bold-t">是否有犯罪记录</div>
              <div class="fill-in"><span v-if="crime!='null'">{{crime}}</span></div>
            </div>
            <div class="line">教育背景</div>
            <div class="form-x box4">
              <div class="bold-t">起止时间</div>
              <div class="bold-t">学校名称</div>
              <div class="bold-t">专业</div>
              <div class="bold-t">所获证书及文凭</div>
            </div>
            <div class="form-x box4">
              <div><span v-if="studytime1!='null'">{{studytime1}}</span></div>
              <div><span v-if="school1!='null'">{{school1}}</span></div>
              <div><span v-if="profession1!='null'">{{profession1}}</span></div>
              <div><span v-if="diploma1!='null'">{{diploma1}}</span></div>
            </div>
            <div class="form-x box4">
              <div><span v-if="studytime2!='null'">{{studytime2}}</span></div>
              <div><span v-if="school2!='null'">{{school2}}</span></div>
              <div><span v-if="profession2!='null'">{{profession2}}</span></div>
              <div><span v-if="diploma2!='null'">{{diploma2}}</span></div>
            </div>
            <div class="line">工作经历</div>
            <div class="form-x box4">
              <div class="bold-t">起止时间</div>
              <div class="bold-t">企业名称</div>
              <div class="bold-t">职务</div>
              <div class="bold-t">离职原因</div>
            </div>
            <div class="form-x box4">
              <div><span v-if="experience1!='null'">{{experience1}}</span></div>
              <div><span v-if="enterprise1!='null'">{{enterprise1}}</span></div>
              <div><span v-if="position1!='null'">{{position1}}</span></div>
              <div><span v-if="leaving1!='null'">{{leaving1}}</span></div>
            </div>
            <div class="form-x box4">
              <div><span v-if="experience2!='null'">{{experience2}}</span></div>
              <div><span v-if="enterprise2!='null'">{{enterprise2}}</span></div>
              <div><span v-if="position2!='null'">{{position2}}</span></div>
              <div><span v-if="leaving2!='null'">{{leaving2}}</span></div>
            </div>
            <div class="form-x">
              <div class="bold-t">个人能力及特长描述</div>
              <div class="fill-in"><span v-if="speciality!='null'">{{speciality}}</span></div>
            </div>
            <div class="form-x">
              <div class="bold-t">本人持有技能证件</div>
              <div class="fill-in"><span v-if="certificates!='null'">{{certificates}}</span></div>
            </div>
            <div class="line">求职意向</div>
            <div class="form-x">
              <div class="bold-t">应聘职位</div>
              <div class="fill-in"><span v-if="application!='null'">{{application}}</span></div>
              <div class="bold-t">是否有意向从事兼职</div>
              <div class="fill-in"><span v-if="parttime!='null'">{{parttime}}</span></div>
              <div class="bold-t">上岗时间</div>
              <div class="fill-in"><span v-if="inauguration!='null'">{{inauguration}}</span></div>
            </div>
            <div class="form-x">
              <div class="bold-t">意向单位</div>
              <div class="fill-in"><span v-if="intention!='null'">{{intention}}</span></div>
              <div class="bold-t">期望薪资</div>
              <div class="fill-in"><span v-if="pay!='null'">{{pay}}</span></div>
            </div>
            <div class="">
              本人保证以上所填内容真实、完整、有效，如所填内容与事实不符，公司保留追溯权利，本人愿承担所产生的一切后果。 填表人签名：
            </div>
          </div>
          <div class="foot">
            <div>
              <div>金洲市场：020-37808837</div>
              <div>地址：广州市南沙区金洲进港大道22号</div>
              <div>邮箱：sl39007309@163.com</div>
            </div>
            <div>
              <div>黄阁市场：020-39007309</div>
              <div>地址：广州市南沙区黄阁镇黄梅路30号</div>
            </div>
          </div>
        </div>
        <button @click="onPrint">打印</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        mode: 'during',
        date: '',
        userInfo: null,
        user: localStorage.getItem('user'),
        // user: null,
        list: [],
        data1: null,
        name: null,
        tel: null,
        card: null,
        sex: null,
        native: null,
        nation: null,
        height: null,
        weight: null,
        strength: null,
        shoe: null,
        marriage: null,
        graduate: null,
        education: null,
        major: null,
        gradTime: null,
        language: null,
        foreign: null,
        weixin: null,
        mailbox: null,
        addressnow: null,
        addressregister: null,
        emergency: null,
        relationship: null,
        contact: null,
        illness: null,
        operation: null,
        crime: null,
        studytime1: null,
        school1: null,
        profession1: null,
        diploma1: null,
        studytime2: null,
        school2: null,
        profession2: null,
        diploma2: null,
        experience1: null,
        enterprise1: null,
        position1: null,
        leaving1: null,
        experience2: null,
        enterprise2: null,
        position2: null,
        leaving2: null,
        speciality: null,
        certificates: null,
        application: null,
        parttime: null,
        inauguration: null,
        intention: null,
        pay: null,
      }
    },
    mounted() {
      this.getUser()
    },
    methods: {
      getUser() {
        if (this.user == null) {
          this.$router.push({
            name: 'login'
          })
        }
      },
      onChoice(e) {
        this.userInfo = e.info;
        console.log(this.userInfo)
        var einfo = e.info.split(",")
        console.log(einfo)
        this.data1 = einfo[0];
        this.name = einfo[1];
        this.tel = einfo[2];
        this.card = einfo[3];
        this.sex = einfo[4];
        this.native = einfo[5];
        this.nation = einfo[6];
        this.height = einfo[7];
        this.weight = einfo[8];
        this.strength = einfo[9];
        this.shoe = einfo[10];
        this.marriage = einfo[11];
        this.graduate = einfo[12];
        this.education = einfo[13];
        this.major = einfo[14];
        this.gradTime = einfo[15];
        this.language = einfo[16];
        this.foreign = einfo[17];
        this.weixin = einfo[18];
        this.mailbox = einfo[19];
        this.addressnow = einfo[20];
        this.addressregister = einfo[21];
        this.emergency = einfo[22];
        this.relationship = einfo[23];
        this.contact = einfo[24];
        this.illness = einfo[25];
        this.operation = einfo[26];
        this.crime = einfo[27];
        this.studytime1 = einfo[28];
        this.school1 = einfo[29];
        this.profession1 = einfo[30];
        this.diploma1 = einfo[31];
        this.studytime2 = einfo[32];
        this.school2 = einfo[33];
        this.profession2 = einfo[34];
        this.diploma2 = einfo[35];
        this.experience1 = einfo[36];
        this.enterprise1 = einfo[37];
        this.position1 = einfo[38];
        this.leaving1 = einfo[39];
        this.experience2 = einfo[40];
        this.enterprise2 = einfo[41];
        this.position2 = einfo[42];
        this.leaving2 = einfo[43];
        this.speciality = einfo[44];
        this.certificates = einfo[45];
        this.application = einfo[46];
        this.parttime = einfo[47];
        this.inauguration = einfo[48];
        this.intention = einfo[49];
        this.pay = einfo[50];
      },
      onPrint() {
        const myWindow = window.open('', '标题');
        // 获取id为app内的html
        const bodyHtml = window.document.getElementById('printID').innerHTML;
        // 获取head标签内的html
        let headHtml = document.head.innerHTML;
        // 头中的screen换成打印样式print
        headHtml = headHtml.replace('screen', 'screen, print');
        //重新写入文档流
        myWindow.document.write('<html>');
        myWindow.document.write(headHtml);
        myWindow.document.write('<body >');
        myWindow.document.write(bodyHtml);
        myWindow.document.write('<script>setTimeout(function() {window.print(); window.close();}, 500)</');
        myWindow.document.write('script>');
        myWindow.document.write('</body></html>');
      },
      onChange(date) {
        this.date = date.format('YYYY-MM-DD');
      },
      onQuery(e) {
        if (e == null) {
          return
        }
        this.$axios.get('https://www.sulirencai.cn/api/select.php', {
            params: {
              time: e
            },
          })
          .then((res) => {
            if (res.data.status == 1) {
              this.list = res.data.data
            }
            if (res.data.status == 0) {
              this.list = []
            }
          })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .title {
    font-size: 1.6rem;
    color: #FF7A00;
    text-align: center;
    width: 100%;
  }
  .main {
    display: flex;
  }
  .main-l {
    width: 42%;
    display: flex;
    flex-direction: column;
  }
  .main-l-cell {
    display: flex;
  }
  .main-r {
    text-align: center;
  }
  .print-t {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
  }
  .form-b {
    border: 0.02rem solid black;
  }
  .form-x {
    display: flex;
    border-bottom: 0.01rem solid black;
  }
  .bold-t {
    padding: 0.2rem 0.1rem;
    width: 4.2rem;
    font-weight: bold;
    border-left: 0.01rem solid black;
    border-right: 0.01rem solid black;
  }
  .fill-in {
    padding: 0.2rem 0.1rem;
    width: 6rem;
  }
  .line {
    text-align: center;
    font-weight: bold;
    padding: 0.2rem 0;
    border-bottom: 0.01rem solid black;
    border-left: 0.01rem solid black;
    border-right: 0.01rem solid black;
  }
  .foot {
    display: flex;
    justify-content: space-between;
    text-align: left;
  }
  .box4 {
    display: flex
  }
  .box4 div {
    width: 25%;
    border-left: 0.01rem solid black;
    border-right: 0.01rem solid black;
  }
  .data-l {
    width: 30rem;
  }
  .item-cell {
    width: 3rem;
    border-bottom: 0.01rem solid #FF7A00;
    margin-bottom: 0.4rem;
  }
</style>
